import React, { useState, useEffect } from 'react'
import { Save, RefreshCw, Server } from 'lucide-react'

function GatewayConfig() {
  const [config, setConfig] = useState({
    port: 8080,
    maxConnections: 1000,
    timeout: 30,
    enableLogging: true,
    enableMetrics: true,
    rateLimit: 100
  })
  const [isLoading, setIsLoading] = useState(false)
  const [isSaved, setIsSaved] = useState(false)

  useEffect(() => {
    loadConfig()
  }, [])

  const loadConfig = async () => {
    setIsLoading(true)
    try {
      // 这里应该调用后端API获取配置
      // const response = await fetch('/api/gateway/config')
      // const data = await response.json()
      // setConfig(data)
      
      // 模拟API调用
      setTimeout(() => {
        setIsLoading(false)
      }, 500)
    } catch (error) {
      console.error('加载配置失败:', error)
      setIsLoading(false)
    }
  }

  const saveConfig = async () => {
    setIsLoading(true)
    try {
      // 这里应该调用后端API保存配置
      // const response = await fetch('/api/gateway/config', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify(config)
      // })
      
      // 模拟API调用
      setTimeout(() => {
        setIsLoading(false)
        setIsSaved(true)
        setTimeout(() => setIsSaved(false), 3000)
      }, 1000)
    } catch (error) {
      console.error('保存配置失败:', error)
      setIsLoading(false)
    }
  }

  const handleInputChange = (field, value) => {
    setConfig(prev => ({
      ...prev,
      [field]: field === 'port' || field === 'maxConnections' || field === 'rateLimit' 
        ? parseInt(value) || 0
        : field === 'timeout'
        ? parseFloat(value) || 0
        : value
    }))
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">网关配置</h1>
            <p className="text-blue-200">配置网关服务器的基本参数和运行选项</p>
          </div>
          <div className="flex items-center space-x-3">
            <button
              onClick={loadConfig}
              disabled={isLoading}
              className="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors duration-200 disabled:opacity-50"
            >
              <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
              刷新
            </button>
            <button
              onClick={saveConfig}
              disabled={isLoading}
              className="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors duration-200 disabled:opacity-50"
            >
              <Save className="h-4 w-4 mr-2" />
              保存配置
            </button>
          </div>
        </div>
      </div>

      {/* Configuration Form */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Basic Settings */}
        <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
          <h2 className="text-xl font-bold text-white mb-4 flex items-center">
            <Server className="h-5 w-5 mr-2" />
            基本设置
          </h2>
          
          <div className="space-y-4">
            <div>
              <label className="block text-blue-200 text-sm font-medium mb-2">端口号</label>
              <input
                type="number"
                value={config.port}
                onChange={(e) => handleInputChange('port', e.target.value)}
                className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-blue-300 focus:outline-none focus:border-blue-500"
                placeholder="请输入端口号"
              />
            </div>
            
            <div>
              <label className="block text-blue-200 text-sm font-medium mb-2">最大连接数</label>
              <input
                type="number"
                value={config.maxConnections}
                onChange={(e) => handleInputChange('maxConnections', e.target.value)}
                className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-blue-300 focus:outline-none focus:border-blue-500"
                placeholder="请输入最大连接数"
              />
            </div>
            
            <div>
              <label className="block text-blue-200 text-sm font-medium mb-2">超时时间(秒)</label>
              <input
                type="number"
                step="0.1"
                value={config.timeout}
                onChange={(e) => handleInputChange('timeout', e.target.value)}
                className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-blue-300 focus:outline-none focus:border-blue-500"
                placeholder="请输入超时时间"
              />
            </div>
          </div>
        </div>

        {/* Advanced Settings */}
        <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20">
          <h2 className="text-xl font-bold text-white mb-4">高级设置</h2>
          
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <label className="block text-blue-200 text-sm font-medium mb-1">启用日志记录</label>
                <p className="text-blue-300 text-sm">记录所有请求和响应日志</p>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={config.enableLogging}
                  onChange={(e) => handleInputChange('enableLogging', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
              </label>
            </div>
            
            <div className="flex items-center justify-between">
              <div>
                <label className="block text-blue-200 text-sm font-medium mb-1">启用性能监控</label>
                <p className="text-blue-300 text-sm">收集系统性能指标数据</p>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={config.enableMetrics}
                  onChange={(e) => handleInputChange('enableMetrics', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
              </label>
            </div>
            
            <div>
              <label className="block text-blue-200 text-sm font-medium mb-2">请求频率限制(次/秒)</label>
              <input
                type="number"
                value={config.rateLimit}
                onChange={(e) => handleInputChange('rateLimit', e.target.value)}
                className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-blue-300 focus:outline-none focus:border-blue-500"
                placeholder="请输入频率限制"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Save Status */}
      {isSaved && (
        <div className="fixed top-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg animate-bounce">
          配置保存成功！
        </div>
      )}
    </div>
  )
}

export default GatewayConfig